import React from 'react'
import "../../scss/jjt/Appointment.scss"
import { Toast,NavBar  } from 'react-vant';
// import { SettingO,Ellipsis    } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { Typography } from 'react-vant';
import IconFont from "../publics/JjtIcon";
import axios from "axios";
import { useState, useEffect } from "react";
import { useSelector,useDispatch } from 'react-redux';
import { toitem } from '../../store/Num';
//预约记录
export default function Appointment() {
    let dispatch = useDispatch()
    let navigate = useNavigate();
    let data = ["全部","待看房","已完成","已拒绝"]
    let [btnindex,setbtnindex] = React.useState(0)
     //获取预约信息
  let [appointmentData, setAppointmentData] = useState([]);
  let [old,setold] = useState([])
  let getAppointmentData = async () => {
    let uid = localStorage.getItem("_id")
    let {data} = await axios.get("http://localhost:3000/jjt/getAppointment",{params:{uid,btnindex}});
    
    setAppointmentData(data)
    setold(data)
    console.log(data)
  }
  //取消预约
  let delitem = async (item) => {
      console.log(item,1111)
      await axios.post("http://localhost:3000/jjt/delappointemnt",item);
      getAppointmentData();
  }
  //切换分类
  let Search = (index) => {
    setbtnindex(index)
    console.log(index)
  }
  let todetail = (item) => {
    navigate("/reservation")
    dispatch(toitem(item))
  }
  useEffect(() => {
    getAppointmentData();
  },[btnindex])
  return (
    <div className='appointment'>
        <div className='appointmenttop'>
        <NavBar
            title="预约记录"
            
            // leftText="返回"
            // rightText={<SettingO/>}
            onClickLeft={() => {navigate("/myapp")}}
            onClickRight={() => Toast('按钮')}
        />
        </div>
        <div className='appointmentmiddle'>
            {
                data.map((item,index)=>(
                    <button key={index} onClick={()=>{Search(index)}}>
                        <span   style={btnindex===index?{borderBottom:"3px solid orange",color:"#000000",fontWeight:"bold"}:{}}>{item}</span>
                    </button>
                ))
            }
        </div>
        <div >
            
            {
            appointmentData.map(item=>(
                <div key={item._id} className='appointmentbottom'>
                    <div className='appointmentbottomitem1'>
                        <div className='appointmentbottomitem1left'>
                            <span>看房时间：{item.look_time.split("T")[0]}</span>
                        </div>
                        <div className='appointmentbottomitem1right'>
                            <span>{data[item.appointstatus+1]}</span>
                        </div>
                    </div>
                    <div className='appointmentbottomitem2'>
                    <div className='appointmentbottomcon1'>
                        <img src={require("../../staticfile/userimg.jpg")} alt="" />
                    </div>
                    <div className='appointmentbottomcon2'>
                        <div className='appointmentbottomcon2p1'>
                            <Typography.Text ellipsis className='appointmentbottomcon2p1con'>{item.hid.classfy}|{item.hid.describe}</Typography.Text>
                        </div>
                        <p className='appointmentbottomcon2p2'>
                            <span>{item.hid.house_type.split("/")[0]}·{item.hid.plot}·{item.hid.name}</span>
                        </p>
                        <p className='appointmentbottomcon2p3'>
                            <span>{item.hid.price}元/月</span>
                        </p>
                    </div>
                </div>
                <div className='appointmentbottomitem3'>
                    <button onClick={()=>{todetail(item)}}>预约详情</button>
                    <button onClick={()=>{delitem(item)}}>取消预约</button>
                </div>
                </div>
            ))
            }
        </div>
    </div>
  )
}
